<template>
  <n-grid :item-responsive="true" :x-gap="16" :y-gap="16">
    <n-grid-item span="0:24 640:24 1024:16">
      <n-grid :item-responsive="true" :x-gap="16" :y-gap="16">

        <n-grid-item span="0:24 640:24 1024:10">
          <UserInfo class="h-full"/>

          </n-grid-item>
        <n-grid-item span="0:24 640:24 1024:14">
          <n-space :vertical="true" :size="16">
            <n-card title="快捷操作" :bordered="false" size="small" class="shadow-sm rounded-16px min-h-285px">
              <template #header>
                <n-space>
                  快捷操作
                  <!-- <n-button strong secondary round type="info" @click="handleAddClick">新增</n-button> -->
                </n-space>
              </template>
              <n-grid :item-responsive="true" responsive="screen" cols="m:2 l:3" :x-gap="8" :y-gap="8">
                <n-grid-item v-for="item in list" :key="item.id">
                  <shortcuts-card :form-data="item" @edit="handleEditClick" @del="handleDelLink" @click="jump2Menu(item)" />
                </n-grid-item>
                <n-grid-item>
                  <div @click="handleAddClick" v-if="pageObj.size != list.length"
                    class="text-gray-400 shortcutsCard flex-col-center p-12px border-1px border-[#efeff5] dark:border-[#ffffff17] rounded-4px hover:shadow-lg cursor-pointer relative overflow-hidden h-full">
                    <icon-material-symbols:add class="text-30px"></icon-material-symbols:add>
                    <p class="py-8px text-16px">添加</p>
                  </div>
                </n-grid-item>
              </n-grid>
              <n-modal v-model:show="showModal" title="快捷菜单" display-directive="if" :bordered="false" preset="card"
                class="w-500px" size="huge" :closable="false">
                <slef-form :yes-or-no-options="yesOrNoOptions" :formData="formData" @close="handleCloseModal"
                  @list="getList"></slef-form>
              </n-modal>
            </n-card>


          </n-space>

        </n-grid-item>
        <n-grid-item span="0:24 640:24 1024:24">
          <LineECharts v-if="xDate && xDate.length > 0" :xDate="xDate" :sDate="sDate"/>
        </n-grid-item>
    </n-grid>
  </n-grid-item>
    <n-grid-item span="0:24 640:24 1024:8">
      <n-space :vertical="true" :size="16">
        <n-card title="日历" :bordered="false" size="small" class="shadow-sm rounded-16px">
          <div style="text-align: center;">
            <n-calendar #="{ year, month, date }">
              <div v-if="lunisolar(year+'/'+month+'/'+date).solarTerm" class="text-red-400">
                {{lunisolar(year+'/'+month+'/'+date).solarTerm?.toString()}}
              </div>
              <div v-else>
                {{lunisolar(year+'/'+month+'/'+date).lunar.getDayName()?lunisolar(year+'/'+month+'/'+date).lunar.getDayName():'三十'}}
              </div>
            </n-calendar>
          </div>
          <div>
            <div class="mt-2 -mb-1">
              天气预报<span class="ml-1 text-gray-400 text-xs">(广州黄埔)</span>
            </div>
             <!-- 天气 -->
            <WeatherCard></WeatherCard>
          </div>
        </n-card>
      </n-space>
    </n-grid-item>

  </n-grid>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { fetchLinkPage, fetchInitData, fetchLink, fetchDelLink } from '~/src/service/api/workbench/link';
import { fetchWorkBenchLoginLog } from '@/service/api/sys/log'
import { ShortcutsCard, WeatherCard,LineECharts,UserInfo } from './modules';
import { QuickLink } from './modules/link';
import slefForm from "./modules/link/form.vue"
import { useRouter } from 'vue-router';
import lunisolar from 'lunisolar'
const router = useRouter();
defineOptions({ name: 'DashboardWorkbenchMain' });
const pageObj = reactive<Common.Page<QuickLink>>({ total: 0, size: 6, current: 1 })
const searchForm = reactive({});
const list = ref<QuickLink[]>([]);
function initFormData(): QuickLink {
  return {
    color: "#409EFF",
    isIframe: 'n',
    sort: 0
  }
}
const showModal = ref(false);
const formData = ref<QuickLink>(initFormData())
async function getList() {
  const { data } = await fetchLinkPage(pageObj, searchForm)
  list.value = data?.records || []
}
async function handleEditClick(row: QuickLink) {
  if (!row || !row.id) {
    window.$message?.error("当前行数据异常,请刷新后重试")
    return;
  }
  const { data } = await fetchLink(row.id)
  formData.value = data!;
  showModal.value = true;
}
async function handleDelLink(row: QuickLink): Promise<boolean> {
  if (!row || !row.id) {
    window.$message?.error("数据id异常,请刷新后重试")
    return false
  }
  const res = await fetchDelLink([row.id])
  if (!res.error) {
    getList()
    window.$message?.success("删除成功！")
  }
  return true

}
function jump2Menu(row: QuickLink) {
  if (row.isIframe === 'y') {
    window.open(row.url)
  } else {
    router.push({ path: row.url! })
  }
}
function handleAddClick() {
  if (pageObj.size === list.value.length) {
    window.$message?.error("最多只能拥有" + pageObj.size + "个快捷菜单")
    return;
  }
  formData.value = initFormData();
  showModal.value = true;
}

function handleCloseModal() {
  formData.value = initFormData();
  showModal.value = false;
}

const yesOrNoOptions = ref<any>([])
const xDate = ref<any>([])
const sDate = ref<any>([])
function initData() {
  fetchInitData().then(res => {
    yesOrNoOptions.value = res.data.yesOrNoOptions
  })
  fetchWorkBenchLoginLog().then(res => {
      res.data.forEach((e: { date: any; num: any; }) => {
        xDate.value.push(e.date)
        sDate.value.push(e.num)
      });

  })
}

onMounted(() => {
  getList()
  initData();
})
</script>
<style >
.n-calendar {
  height: 500px;
}

.n-calendar-dates {
  flex: none;
}
</style>

